<!DOCTYPE html>
<html lang="ZH-cn">

<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="./styles/default.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        s-page > * {
            margin: 16px;
        }
    </style>
</head>

<body>
<s-page id="app">
    <h1> {{state.list[state.select]}}</h1>
    <select v-model="state.select">
        <option v-for="(item, key) of state.adds" :value="key">{{item}}</option>
    </select>

    <s-picker label="地区" type="select" v-model.lazy="state.select">
        <s-picker-item v-for="(item, key) of state.adds" :value="key">{{item}}</s-picker-item>
    </s-picker>

    <s-navigation style="max-height: 600px;" label="地区" v-model.lazy="state.select">
        <s-navigation-item v-for="(item, key) of state.list" :value="key">
            <s-icon type="add" slot="icon"></s-icon>
            <div slot="text">{{item}}</div>
        </s-navigation-item>
    </s-navigation>

    <s-tab style="max-height: 600px;" label="地区" type="select">
        <s-tab-item v-for="(item, key) of state.list" :value="key" :selected="key==='C'">
            <s-icon type="add" slot="icon"></s-icon>
            <div slot="text">{{item}}</div>
        </s-tab-item>
    </s-tab>

    <s-segmented-button type="select" v-model="state.select">
        <s-segmented-button-item v-for="(item, key) of state.list" :value="key">
            {{item}}
        </s-segmented-button-item>
    </s-segmented-button>

    <s-button @click="add">新增option</s-button>
    <hr>

    <s-button @click="state.select='A'">更新Picker</s-button>
    <hr>
    <s-checkbox v-model="state.bool" type="checkbox"></s-checkbox>

    <s-switch v-model="state.bool" type="checkbox"></s-switch>
    <s-button @click="state.bool=!state.bool">更新Checkbox {{state.bool}}</s-button>

    <hr>
    <s-radio-button type="radio" value="A" v-model="state.select">上海</s-radio-button>
    <s-radio-button type="radio" value="B" v-model="state.select">北京</s-radio-button>
    <s-radio-button type="radio" value="C" v-model="state.select">广州</s-radio-button>
    <s-radio-button type="radio" value="D" v-model="state.select">深圳</s-radio-button>
    <hr>
    <input type="radio" value="A" v-model="state.select">上海
    <input type="radio" value="B" v-model="state.select"> 北京
    <input type="radio" value="C" v-model="state.select"> 广州
    <input type="radio" value="D" v-model="state.select">深圳
    <hr>
    <s-rate v-model="state.num" type="range"></s-rate>
    <input type="range" v-model="state.num" max="10">
    <s-slider max="10" v-model="state.num" type="range"></s-slider>

    <s-button @click="state.num=2">改变num {{state.num}}</s-button>

    <s-button @click="theme">改变主题</s-button>
    <hr>
    <s-field-text v-model="state.input2" label="请输入内容" type="text"></s-field-text>
    {{state.input2}}
    <s-icon-button @click="state.input2=''">
        <s-icon type="add"></s-icon>
    </s-icon-button>
    <hr>
    <s-search v-model="state.input">
        <s-icon-button slot="end" @click="state.input=''">
            <s-icon type="add"></s-icon>
        </s-icon-button>
    </s-search>

    {{state.input}}

    <s-icon-button @click="state.input=''">
        <s-icon type="add"></s-icon>
    </s-icon-button>

    <s-button @click="state.num=8">更新num {{state.num}}</s-button>

</s-page>

<script>
    const {createApp, ref, reactive} = Vue;

    const app = createApp({
        setup() {
            const state = reactive({
                num: 5,
                bool: false,
                input: '',
                input2: '',
                select: 'C',
                list: {
                    'A': '上海',
                    'B': '北京',
                    'C': '广州',
                    'D': '深圳'
                },
                adds: {}
            });
            const add = () => {
                for (const key in state.list) {
                    state.adds[key] = state.list[key];
                }
            };
            const theme = () => {
                soberTheme.create('#009688', document.querySelector('s-page'));
            };
            return {
                state, add, theme
            };
        }
    });
    app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('s-');
    app.mount('#app');
</script>
<script type="module" src="../dist/main.js"></script>
<!-- <script src="https://unpkg.com/sober/dist/sober.min.js"></script> -->
<script src="https://unpkg.com/sober-theme/dist/sober-theme.min.js"></script>
<script type="module" src="./scripts/default.js"></script>
<script>

</script>
</body>

</html>
